<template>
  <div class="found-list">
    <div>
      <el-form :inline="true" :model="search_date">

        <el-form-item label="按照时间筛选：">
          <el-date-picker
              v-model="search_date.startTime"
              type="datetime"
              placeholder="选择开始时间"
              default-time="12:00:00">
          </el-date-picker>
          --
          <el-date-picker
              v-model="search_date.endTime"
              type="datetime"
              placeholder="选择结束时间"
              default-time="12:00:00">
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
              type="primary"
              size="small"
              icon="search"
              @click="handleSearch()">筛选</el-button>
        </el-form-item>

        <el-form-item class="rightBtn">
          <el-button
              type="primary"
              size="small"
              icon="view"
              v-if="user.identity == 'manager'"
              @click="handleAdd()">添加</el-button>
        </el-form-item>

      </el-form>
    </div>

    <div class="table-container">
      <el-table
          v-if="tableData.length > 0"
          :data="tableData"
          max-height="400"
          border
          style="margin: 10px auto; width: 98%">

        <el-table-column
            type="index"
            label="序号"
            align="center"
            width="60">
        </el-table-column>

        <el-table-column
            label="创建时间"
            prop="date"
            align="center"
            sortable
            width="250">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.date }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="收支类型"
            prop="type"
            align="center"
            width="150">
        </el-table-column>

        <el-table-column
            label="收支描述"
            prop="describe"
            align="center"
            width="180">
        </el-table-column>

        <el-table-column
            label="收入"
            prop="income"
            align="center"
            width="160">
          <template slot-scope="scope">
            <span style="color: #00d053">{{ scope.row.income }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="支出"
            prop="expend"
            align="center"
            width="160">
          <template slot-scope="scope">
            <span style="color: #f56767">{{ scope.row.expend }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="账户现金"
            prop="cash"
            align="center"
            width="160">
          <template slot-scope="scope">
            <span style="color: #4db3ff">{{ scope.row.cash }}</span>
          </template>
        </el-table-column>

        <el-table-column
            label="备注"
            prop="remark"
            align="center"
            width="220">
        </el-table-column>

        <el-table-column
            label="操作"
            align="center"
            fixed="right"
            v-if="user.identity == 'manager'"
            width="180">
          <template slot-scope="scope">
            <el-button
                size="small"
                type="warning"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>


      </el-table>

      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="paginationData.current_page"
                :page-sizes="paginationData.page_sizes"
                :page-size="paginationData.page_size"
                :layout="paginationData.layout"
                :total="paginationData.total">
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>

    <Dialog
        :dialog="dialog"
        :form="form"
        @update="initProfile">
    </Dialog>

  </div>
</template>

<script>
  import Dialog from "../components/Dialog";
  import { getProfile, deleteData } from "../utils/api";
  export default {
    name: "FoundList",
    data(){
      return {
        search_date: {
          startTime: '',
          endTime: ''
        },
        paginationData: {
          total: 0,  //总数：0
          current_page: 1, //当前是哪一页
          page_size: 5,  //每页显示多少条
          page_sizes: [5, 10, 15, 20],  //设置每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"  //翻页属性
        },
        tableData: [], //单页展示的表单数据
        allTableData: [],  //所有的表单数据
        filterTableData: [],  //通过时间区间筛选的所有表单数据
        dialog: {
          show: false,
          title: '',
          option: ''
        },
        form: {
          type: '',
          describe: '',
          income: '',
          expend: '',
          cash: '',
          remark: ''
        }
      };
    },
    computed: {
      user(){
        return this.$store.getters.user;
      }
    },
    created() {
      this.initProfile();
    },
    methods: {
      initProfile(){
        getProfile().then(data => {
          this.allTableData = data;
          this.filterTableData = data;
          console.log(data);
          //设置分页数据：
          this.setPagination();
        })
        .catch(err => console.log(err));
        // this.$axios.get('/api/profiles')
        //   .then(res => {
        //     this.allTableData = res.data;
        //     this.filterTableData = res.data;
        //     //设置分页数据：
        //     this.setPagination();
        //   })
        //   .catch(err => {
        //     console.log(err);
        //   });
      },
      setPagination(){
        this.paginationData.total = this.allTableData.length;
        this.paginationData.current_page = 1;
        this.paginationData.page_size = 5;
        //设置默认的分页信息
        this.tableData = this.allTableData.filter((item, index) => {
          return index < this.paginationData.page_size;
        });
      },
      handleEdit(index, row) {
        // console.log(index, row);
        if(this.user.identity !== 'manager') return; //不是管理员不能编辑
        this.dialog = {
          show: true,
          title: '修改资金信息',
          option: 'edit'
        };
        this.form = {
          type: row.type,
          describe: row.describe,
          income: row.income,
          expend: row.expend,
          cash: row.cash,
          remark: row.remark,
          id: row._id
        }
      },
      handleDelete(index, row) {
        // console.log(index, row);
        if(this.user.identity !== 'manager') return; //不是管理员不能删除
        deleteData(row._id)
          .then(res => {
            // console.log(res);
            this.$message('删除成功');
            this.initProfile();
          })
          .catch(err => {
            console.log(err);
          });
        // this.$axios.delete(`/api/profiles/delete/${row._id}`)
        //   .then(res => {
        //     this.$message('删除成功');
        //     this.getProfile();
        //   }).catch(err => {
        //     console.log(err);
        // });
      },
      handleAdd(){
        this.dialog = {
          show: true,
          title: '添加资金信息',
          option: 'add'
        };
        this.form = {
          type: '',
            describe: '',
            income: '',
            expend: '',
            cash: '',
            remark: '',
            id: ''
        };
      },
      handleSizeChange(page_size){
        this.paginationData.current_page = 1;
        //切换size
        this.paginationData.page_size = page_size;
        //分页信息
        this.tableData = this.allTableData.filter((item, index) => {
          return index < page_size;
        });
      },
      handleCurrentChange(page){
        //从allTableData的第几条数据开始
        let index = this.paginationData.page_size * (page - 1);
        //数据总和
        let numbs = this.paginationData.page_size * page;
        //容器
        let tables = [];

        for(let i=index; i<numbs; i++){
          if(this.allTableData[i]){
            tables.push(this.allTableData[i]);
          }
          this.tableData = tables;
        }
      },
      handleSearch(){
        //筛选
        if(!this.search_date.startTime || !this.search_date.endTime){
          this.$message({
            type: 'warning',
            message: '请选择时间区间'
          });
          this.initProfile();
          return;
        }
        const sTime = this.search_date.startTime.getTime();
        const eTime = this.search_date.endTime.getTime();
        this.allTableData = this.filterTableData.filter(item => {
          let date = new Date(item.date);
          let time = date.getTime();
          return time >= sTime && time <= eTime;
        });
        //刷新分页数据
        this.setPagination();
      }
    },
    components: {
      Dialog
    }
  }
</script>

<style scoped>
  .found-list{
    width: 100%;
    height: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .rightBtn{
    float: right;
  }
  .pagination{
    margin-top: 10px;
    text-align: right;
  }
</style>